<!--
 * @Author: cjy
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2022-01-17 17:50:24
 * @FilePath: \vue-openlayers\src\views\firstMap\FirstMap.vue
-->
<template>
	<div id="app">
	<div class="backround">
		<vue-seamless-scroll  :data="listData"  :class-option="optionHover" class="seamless-warp">
            <ul>
                <li v-for="(item, index) in listData"  :key="index" ><a :href="item.src">{{item.title}}</a></li>
            </ul>
		</vue-seamless-scroll>
	</div>
		
	</div>
   
</template>


<script>
    export default {
        data () {
            return {
				status:false,
                listData: [
					{
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://cn.bing.com/search?q=vue'
                 },
                 {
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://cn.bing.com/search?q=vue'
                 },
                 {
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://cn.bing.com/search?q=vue'
                 },
                 {
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://cn.bing.com/search?q=vue'
                 },
                 {
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://cn.bing.com/search?q=vue'
                 },
                 {
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16',
				   'src':'https://www.baidu.com'
                 },
				
				]
                }
            },
            computed: {
               optionHover() {
				 return {
				   step: .5, // 数值越大速度滚动越快
				   limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
				   hoverStop: true, // 是否开启鼠标悬停stop
				   direction: 1, // 0向下 1向上 2向左 3向右
				   openWatch: true, // 开启数据实时监控刷新dom
				   singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				   waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
				 };
			   },
              
             }
 }
</script>
<style lang="scss" scoped>
.backround{
	width: 100%;
	height: 1000px;
}
.seamless-warp{
	height: 300px;
	overflow: hidden;
    ul {
        li{
            margin-top: 20px;
        }
    }

	
}

</style>
